<!-- 这个Vue组件使用了Element UI库，主要实现了图书借阅信息的管理功能。包括图书编号、图书名称、借阅者、借阅时间、最迟归还日期和状态等信息的展示，以及批量删除、修改和续借操作。还提供了分页功能。

功能详解：
搜索区域：提供图书编号、图书名称和借阅者的搜索功能。
按钮区：包括批量删除按钮，仅管理员可见。
数据表格：显示图书借阅信息，包括图书编号、图书名称、借阅者、借阅时间、最迟归还日期和状态。并提供修改、删除和续借操作。
分页组件：实现数据分页功能。
修改借阅信息对话框：用于修改借阅信息。
通过这些功能，用户可以方便地查询和管理图书的借阅信息。 -->
<template>
  <!-- 主容器，设置了内边距 -->
  <div class="home" style ="padding: 10px">
    <!-- 搜索区域 -->
    <div style="margin: 10px 0;">
      <!-- 使用Element UI的表单组件，设置为内联表单，小尺寸 -->
      <el-form inline="true" size="small">
        <!-- 图书编号输入框 -->
        <el-form-item label="图书编号">
          <el-input v-model="search1" placeholder="请输入图书编号" clearable>
            <template #prefix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 图书名称输入框 -->
        <el-form-item label="图书名称">
          <el-input v-model="search2" placeholder="请输入图书名称" clearable>
            <template #prefix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 借阅者输入框，仅管理员可见 -->
        <el-form-item label="借阅者" v-if="user.role == 1">
          <el-input v-model="search3" placeholder="请输入借阅者昵称" clearable>
            <template #prefix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item>
          <el-button type="primary" style="margin-left: 1%" @click="load" size="mini">查询</el-button>
        </el-form-item>
        <!-- 重置按钮 -->
        <el-form-item>
          <el-button size="mini" type="danger" @click="clear">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 按钮区 -->
    <div style="margin: 10px 0;">
      <!-- 批量删除按钮，仅管理员可见 -->
      <el-popconfirm title="确认删除?" @confirm="deleteBatch" v-if="user.role == 1">
        <template #reference>
          <el-button type="danger" size="mini">批量删除</el-button>
        </template>
      </el-popconfirm>
    </div>
    <!-- 数据表格 -->
    <el-table :data="tableData" stripe border="true" @selection-change="handleSelectionChange">
      <!-- 多选框列，仅管理员可见 -->
      <el-table-column v-if="user.role == 1" type="selection" width="55"></el-table-column>
      <!-- 图书编号列 -->
      <el-table-column prop="bookId" label="图书编号" sortable />
      <!-- 图书名称列 -->
      <el-table-column prop="bookInfo.name" label="图书名称" />
      <!-- 借阅者列 -->
      <el-table-column prop="userInfo.nickName" label="借阅者" />
      <!-- 借阅时间列 -->
      <el-table-column prop="lendTime" label="借阅时间" />
      <!-- 最迟归还日期列 -->
      <el-table-column prop="returnTime" label="最迟归还日期" />
      <!-- 状态列 -->
      <el-table-column prop="status" label="状态" />
      <!-- 操作列 -->
      <el-table-column fixed="right" label="操作">
        <template v-slot="scope">
          <!-- 修改按钮，仅管理员可见 -->
          <el-button size="mini" @click="handleEdit(scope.row)" v-if="user.role == 1">修改</el-button>
          <!-- 删除按钮，仅管理员可见 -->
          <el-popconfirm title="确认删除?" @confirm="handleDelete(scope.row)" v-if="user.role == 1">
            <template #reference>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-popconfirm>
          <!-- 续借按钮，仅普通用户可见 -->
          <el-popconfirm title="确认续借(续借一次延长30天)?" @confirm="handleProlong(scope.row)" v-if="user.role == 2">
            <template #reference>
              <el-button type="danger" size="mini" :disabled="scope.row.prolong === 0">续借</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div style="margin: 10px 0">
      <el-pagination
        v-model:currentPage="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>

      <!-- 修改借阅信息对话框 -->
      <el-dialog v-model="dialogVisible2" title="修改借阅信息" width="30%">
        <el-form :model="form" label-width="120px">
          <el-form-item label="图书编号">
            <el-input style="width: 80%" v-model="form.bookId"></el-input>
          </el-form-item>
          <el-form-item label="图书名称">
            <el-input style="width: 80%" v-model="form.bookName"></el-input>
          </el-form-item>
          <el-form-item label="借阅者">
            <el-input style="width: 80%" v-model="form.readerId"></el-input>
          </el-form-item>
          <el-form-item label="续借次数">
            <el-input style="width: 80%" v-model="form.prolong"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 导入request模块，用于处理HTTP请求
import request from "../utils/request";
// 导入Element Plus的消息组件，用于显示提示信息
import { ElMessage } from "element-plus";
// 导入moment库，用于处理日期和时间
import moment from "moment";

// 默认导出Vue组件
export default {
  // 组件创建时的钩子函数
  created() {
    // 从sessionStorage获取用户信息，若不存在则使用空对象
    let userStr = sessionStorage.getItem("user") || "{}";
    // 将获取的用户信息解析为JSON对象并赋值给this.user
    this.user = JSON.parse(userStr);
    // 加载数据
    this.load();
  },
  name: 'lendrecord', // 组件名称
  methods: {
    // 处理表格选择项变化
    handleSelectionChange(val) {
      // 将选择项赋值给forms
      this.forms = val;
    },
    // 批量删除
    deleteBatch() {
      // 若未选择任何数据，显示警告信息并返回
      if (!this.forms.length) {
        ElMessage.warning("请选择数据！");
        return;
      }
      // 发送批量删除请求
      request.post("/lendRecord/deleteRecords", this.forms).then(res => {
        // 若删除成功，显示成功信息并重新加载数据
        if (res.code === '0') {
          ElMessage.success("批量删除成功");
          this.load();
        } else {
          // 若删除失败，显示错误信息
          ElMessage.error(res.msg);
        }
      });
    },
    // 加载数据
    load() {
      const searchParams = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        search1: this.search1,
        search3: this.search3,
      };
      if (this.user.role == 1) {
        searchParams.search2 = this.search2;
      } else {
        searchParams.search2 = this.user.id;
      }
      request.get("/lendRecord", { params: searchParams }).then(res => {
        console.log(res);
        this.tableData = res.data.records;
        this.total = res.data.total;

        if (this.tableData.length > 0) {
          this.tableData.forEach(record => {
            this.getBookInfo(record.bookId);
            this.getUserInfo(record.readerId);
          });
        }
      });
    },
    // 获取图书信息
    getBookInfo(bookId) {
      request.get(`/book`, {
        params: {
          pageNum: 1,
          pageSize: 10,
          search1: "",
          search2: "",
          search3: "",
          search4: bookId
        }
      }).then(res => {
        console.log("Book Info:", res);
        // 将获取到的书籍信息添加到tableData中对应的记录
        this.tableData = this.tableData.map(record => {
          if (record.bookId === bookId) {
            return { ...record, bookInfo: res.data.records[0] };
          }
          return record;
        });
      });
    },
    // 获取用户信息
    getUserInfo(userId) {
      request.get(`/user`, {
        params: {
          pageNum: 1,
          pageSize: 10,
          search: "",
          id: userId
        }
      }).then(res => {
        console.log("User Info:", res);
        // 将获取到的用户信息添加到tableData中对应的记录
        this.tableData = this.tableData.map(record => {
          if (record.readerId === userId) {
            return { ...record, userInfo: res.data.records[0] };
          }
          return record;
        });
      });
    },
    // 清空搜索条件并重新加载数据
    clear() {
      this.search1 = "";
      this.search2 = "";
      this.search3 = "";
      this.load();
    },
    // 删除单个借阅记录
    handleDelete(row) {
      request.post("/lendRecord/deleteRecord", row).then(res => {
        if (res.code == 0) {
          ElMessage.success("删除成功");
          this.load();
        } else {
          ElMessage.error(res.msg);
        }
      });
    },
    // 处理续借
    handleProlong(row) {
      var nowDate = new Date(row.returnTime);
      nowDate.setDate(nowDate.getDate() + 30);
      row.returnTime = moment(nowDate).format("yyyy-MM-DD HH:mm:ss");
      row.prolong = row.prolong - 1;

      request.put(`/lendRecord/${row.bookId}`, row).then(res => {
        if (res.code == 0) {
          ElMessage({
            message: '续借成功',
            type: 'success',
          });
          this.load();
        } else {
          ElMessage.error(res.msg);
        }
      }).catch(error => {
        console.error("Error prolonging lend record:", error);
        ElMessage.error("续借时出错");
      });
    },
    // 保存修改
    save() {
      request.post("/lendRecord", this.form).then(res => {
        if (res.code == 0) {
          ElMessage({
            message: '修改信息成功',
            type: 'success',
          });
          this.load();
          this.dialogVisible2 = false;
        } else {
          ElMessage.error(res.msg);
        }
      });
    },
    // 处理编辑操作
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible2 = true;
    },
    // 处理分页大小变化
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    // 处理当前页码变化
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load();
    },
  },
  data() {
    return {
      form: {}, // 表单数据
      dialogVisible2: false, // 修改借阅信息对话框是否可见
      search1: '', // 搜索条件1
      search2: '', // 搜索条件2
      search3: '', // 搜索条件3
      total: 10, // 总记录数
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      tableData: [], // 表格数据
      user: {}, // 用户信息
      forms: [], // 表格选中的数据
    };
  },
};
</script>

